<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            margin:0px;
            padding:0px;
            font-family:sans-serif;
            background: url(img/userRegister_bg.jpeg);
            background-size:cover;
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            /*实现块元素百分比下居中*/
            width:450px;
            padding:50px;
            background: rgba(0,0,0,.7);
            box-sizing:border-box;
            box-shadow: 0px 15px 25px rgba(0,0,0,.5);
            border-radius:15px;
        }
        .box h2{
            margin:0 0 30px;
            padding:0;
            color: white;
            text-align:center;
        }
        .box h5{
            margin:0 0 30px;
            padding:0;
            color: #fff;
            text-align:left;
        }
        .box .inputbox{
            position:relative;
        }
        .box .inputbox input{
            width: 100%;
            padding:10px 0;
            font-size:16px;
            color:#fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border:none;
            border-bottom: 1px solid #fff;
            outline:none;
            background: transparent;
        }
        .box .inputbox label{
            position:absolute;
            top:0px;
            left:0px;
            padding:10px 0;
            font-size: 16px;
            color:#fff;
            pointer-events:none;
            transition:.5s;
        }
        .box .inputbox input:focus ~ label,
        .box .inputbox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size:14px;
        }
        .box input[type="submit"],
        .box a
        {
            border: none;
            outline:none;
            font-size: 12px;
            color:#fff;
            padding:15px 20px;
            cursor: pointer;
            border-radius:10px;
        }

        /*随机验证码：*/
        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="box">
    <h2>爱思教育</h2>
    <h5>注册账号</h5>
    <form id="form">
        <div class="inputbox">
            <input type="text" name="userEmail"  id="userEmail" required="">
            <label>邮箱*</label>
        </div>

        <div class="inputbox">
            <input type="text" name="userPhone" id="userPhone" required="">
            <label>手机号*</label>
        </div>

        <!-- 60s倒计时-->
<!--        <div class="row">-->
<!--            <div class="inputbox col">-->
<!--                <input type="text" name=" " required="">-->
<!--                <label>&nbsp;&nbsp;&nbsp;短信验证码</label>-->
<!--            </div>-->
<!--            <div class="col-4">-->
<!--                <input class="row btn btn-primary text-center" type="submit" value="获取验证码" >-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="row">-->
<!--            <div class="inputbox col">-->
<!--                <input type="text" name=" " required="">-->
<!--                <label>&nbsp;&nbsp;&nbsp;验证码</label>-->
<!--            </div>-->
<!--            <div class="code">-->
<!--                <canvas id="canvas" width="80" height="30"></canvas>-->
<!--            </div>-->
<!--        </div>-->

        <div class="inputbox">
            <input  type="password" name="userPwd" id="userPwd" value="" required="required">
            <label>密码*</label>
        </div>

        <div class="inputbox">
            <input  type="password" name="confirmLoginPwd" id="confirmLoginPwd" value="" required="required">
            <label>确认密码*</label>
        </div>

        <div class="row">
            <div class="col col-6">
                <div>
                    <a class="" href="userLogin.html">已有账号？点我登录</a>
                </div>
                <div>
                    <a class="" href="userFindPassword.html">忘记密码？点我找回</a>
                </div>
            </div>
            <div class="col"></div>
            <div class="col">
                <input class="btn btn-primary  align-content-center text-center"
                       id="btnReg" type="button" value="注册">
            </div>
        </div>
    </form>
</div>
</body>

<script src="jQuery/jquery-3.6.0.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#btnReg").click(function(){

            let form = jQuery("#form").serialize();

            var Pwd=document.getElementById("userPwd").value.trim();
            var confirmPwd=document.getElementById("confirmLoginPwd").value.trim();
            var span=document.getElementById("span_confirmLoginPwd");
            var Email=document.getElementById("userEmail").value.trim();
            var userPhone=document.getElementById("userPhone").value.trim();
            var StandardEmail=new RegExp('@');
            var StandardEmail1=new RegExp('.com');
            if(!StandardEmail.test(Email)||!StandardEmail1.test(Email))//测试是否是标准的邮箱格式
            {alert("请输入正确的邮箱地址！");return false;}
            if(userPhone.length<11||userPhone.length>11)//测试手机号长度是否正确
            {alert('请输入长度为11的手机号！');return false;}
            if(Pwd.length<6){alert("请输入长度不小于6的密码！");return false;}//测试密码长度
            if(Pwd!=confirmPwd){alert("两次密码输入不一致！");return false;}
            else
            {
                    jQuery.post("user/searchPhone", form, function (rst1) {//先检查手机号是否被注册过
                        //console.log(rst1);
                        if (rst1.length>0){
                            alert('该手机号码已被注册！');
                            return false;
                        }
                        else
                        {
                            jQuery.post("user/reg1", form, function (rst) {
                                if (rst == 1)
                                {
                                    alert("注册成功");
                                    $(location).attr("href","userLogin.html");//注册成功后跳转至登录界面
                                }
                                else
                                    alert("注册失败");
                            });
                        }

                    });
            }

        });
    })
</script>


</html>


<!--http://localhost:8088/edusys/userRegister.html-->